<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>结算页面</title>

    <link href="/AmazeUI/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="/css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="/css/jsstyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/address.js"></script>
    <script language="JavaScript" src="/basic/js/jquery-1.7.min.js"></script>
    <script language="JavaScript">
        function search() {
            var index=document.getElementById("searchInput").value;
            if (index.length == 0){
                alert("关键字不能为空！");
                return;
            }else {
                window.location.href="/product/findByIndex/"+index+"/1";
            }
        }
        $(function () {
            $.get(
                "/address/getProvinces",
                "",
                function (data) {
                    //清空之前的列表
                    $("#pro").empty();
                    $("#pro").append("<option value=''>---请选择---</option>");

                    //1.获取省份
                    //2.将省份绑定到pro对象上
                    $.each(data.provinces, function (index, content) {
                        $("#pro").append("<option value=\"" + content.province_id + "\">" + content.province + "</option>");
                    });
                },
                "json"
            );
            //当省份改变，就根据省份来绑定
            $("#pro").change(
                function () {
                    //调用ajax来获取市级列表，并与市select绑定
                    $.get(
                        "/address/getCitiesByProvinceId/" + $(this).val(),
                        "",
                        function (data) {
                            //清空之前的列表
                            $("#ci").empty();
                            $("#ci").append("<option value=''>---请选择---</option>");
                            //1.获取省份
                            //当省份改变时，将select的text值绑定到隐藏域
                            var pro_text = $("#pro option:selected").text();
                            $("#province").val(pro_text);
                            //2.将省份绑定到pro对象上
                            $.each(data.cities, function (index, content) {
                                $("#ci").append("<option value=\"" + content.city_id + "\">" + content.city + "</option>");
                            });
                        },
                        "json"
                    );
                }
            );

            //市改变
            $("#ci").change(
                function () {
                    //调用ajax来获取区级列表，并与区select绑定
                    $.get(
                        "/address/getAreasByCityId/"+$(this).val(),
                        "",
                        function (data) {
                            //清空之前的列表
                            $("#ar").empty();
                            $("#ar").append("<option value=''>---请选择---</option>");
                            //当市改变时，将select的text值绑定到隐藏域
                            var ci_text = $("#ci option:selected").text();
                            $("#city").val(ci_text);
                            //1.获取省份
                            //2.将省份绑定到pro对象上
                            $.each(data.areas, function (index, content) {
                                $("#ar").append("<option value=\"" + content.area_id + "\">" + content.area + "</option>");
                            });
                        },
                        "json"
                    );
                }
            );
            //区改变
            $("#ar").change(function () {
                var ar_text = $("#ar option:selected").text();
                $("#area").val(ar_text);
            });
            $("#sub_address").click(function () {
                var params=$("#form1").serializeArray();
                var vip_id=[(${session.viper.vip_id})];
                var address={};
                var province={};
                var city={};
                var area={};
                var vip={};
                for (var item in params){
                    if (params[item].name == "province_id"){
                        if (params[item].value == ""){
                            alert("请检查地址信息！");
                            return;
                        }
                        province[params[item].name]=params[item].value;
                    }else if (params[item].name=="city_id"){
                        if (params[item].value == ""){
                            alert("请检查地址信息！");
                            return;
                        }
                        city[params[item].name]=params[item].value;
                    }else if (params[item].name=="area_id"){
                        if (params[item].value == ""){
                            alert("请检查地址信息！");
                            return;
                        }
                        area[params[item].name]=params[item].value;
                    }else {
                        address[params[item].name]=params[item].value;
                    }
                }
                if (address["receiver"].length == 0){
                    alert("请输入收货人姓名");
                    return;
                }
                if (address["phone"].length == 0){
                    alert("请输入收货人手机号码");
                    return;
                }
                if (address["postcode"].length == 0){
                    alert("请输入邮政编码");
                    return;
                }
                if (address["total_address"].length == 0){
                    alert("请输入详细地址");
                    return;
                }
                vip["vip_id"]=vip_id;
                address["vip"]=vip;
                address["province"]=province;
                address["city"]=city;
                address["area"]=area;
                $.ajax({
                    url: "/address/save",
                    type: "post",
                    data: JSON.stringify(address),
                    dataType:"json",
                    contentType:"application/json",
                    processData: false,
                    success: function (data) {
                        if (data.status == 1){
                            alert("新地址添加成功！");
                            window.location.reload();
                        }else {
                            alert("新地址添加失败！");
                        }
                    },
                    error: function (data) {
                        alert("新地址添加失败！");
                    }
                });
            });

            //选中显示编辑和删除
            $(".user-addresslist").click(function () {

                $(".user-addresslist").find(".new-addr-btn").css("display", "none");

                $(this).find(".new-addr-btn").css("display", "block");

                //给提交订单form中赋值
                var receiver = $(this).find(".buy-user").text();
                $(".buy-footer-address").find(".buy-user").html(receiver);

                var phone = $(this).find(".buy-phone").text();
                $(".buy-footer-address").find(".buy-phone").html(phone);

                var province = $(this).find(".province").text();
                $(".buy-footer-address").find(".province").html(province);

                var city = $(this).find(".city").text();
                $(".buy-footer-address").find(".city").html(city);

                var area = $(this).find(".dist").text();
                $(".buy-footer-address").find(".dist").html(area);

                var street = $(this).find(".street").text();
                $(".buy-footer-address").find(".street").html(street);

                //获取订单id
                var id = $(this).attr("addressId");
                $("#address-id").val(id);

            });
        });

    </script>
</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd" th:if="${session.viper == null || session.viper.vip_id == 0 }">
                <a href="/login.html" target="_top" class="h">亲，请登录</a>
                <a href="/register.html" target="_top">免费注册</a>
            </div>
            <div class="menu-hd" th:if="${session.viper.vip_id != 0}">
                <b th:if="${session.viper.name != null}"
                   th:text="${session.viper.name}+'('+${session.viper.username}+')'"></b>
                <b th:if="${session.viper.name == null}" th:text="'null('+${session.viper.username}+')'"></b>
                <a href="/account/logout" th:text="退出登录"></a>
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd">
                <a href="/index.html" target="_top" class="h">商城首页</a>
            </div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng">
                <a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
            </div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd">
                <a id="mc-menu-hd" th:href="'/cart/findByVipId/'+${session.viper.vip_id}" target="_top"><i
                        class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
                        id="J_MiniCartNum" class="h">0</strong>
                </a>
            </div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd">
                <a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span>
                </a>
            </div>
        </div>
    </ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
    <div class="logo">
        <img src="/images/logo.png"/>
    </div>
    <div class="logoBig">
        <li><img src="/images/logobig.png"/>
        </li>
    </div>

    <div class="search-bar pr">
        <a name="index_none_header_sysc" href="#"></a>
        <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" onclick="search();" type="button">
        </form>
    </div>
</div>

<div class="clear"></div>
<div class="concent">
    <!--地址 -->
    <div class="paycont">
        <div class="address">
            <h3>确认收货地址</h3>
            <div class="control">
                <div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
            </div>
            <div class="clear"></div>
            <ul>

                <div class="per-border"></div>
                <!-- 地址-->
                <li class="user-addresslist" th:each="list:${address}" th:addressId="${list.address_id}">
                    <div class="address-left">
                        <div class="user DefaultAddr">

								<span class="buy-address-detail">
									<span class="buy-user" th:text="${list.receiver}"></span>
									<span class="buy-phone" th:text="${list.phone}"></span>
								</span>
                        </div>
                        <div class="default-address DefaultAddr">
                            <span class="buy-line-title buy-line-title-type">收货地址：</span>
                            <span class="buy--address-detail">
									<span class="province" th:text="${list.province.province}"></span>
									<span class="city" th:if="${list.city.city eq '市辖区' or list.city.city eq '县'}"
                                          th:text="${list.area.area}"></span>
									<span class="city" th:if="${list.city.city ne '市辖区' and list.city.city ne '县'}"
                                          th:text="${list.city.city}"></span>
									<span class="dist" th:if="${list.city.city ne '市辖区' and list.city.city ne '县'}"
                                          th:text="${list.area.area}"></span>
									<span class="street" th:text="${list.total_address}"></span>
								</span>
                        </div>
                        <ins class="deftip hidden">默认地址</ins>
                    </div>
                    <div class="address-right">
                        <span class="am-icon-angle-right am-icon-lg"></span>
                    </div>
                    <div class="clear"></div>

                    <div class="new-addr-btn">
                        <a
                                hfref="#">编辑</a> <span class="new-addr-bar">|</span> <a
                            href="javascript:void(0);" onclick="delClick(this);">删除</a>
                    </div>
                </li>
                <!-- 地址end -->
            </ul>

            <div class="clear"></div>
        </div>


        <!--订单 -->
        <div class="concent">
            <div id="payTable">
                <h3>确认订单信息</h3>
                <input id="order-id" th:value="${order.order_id}" type="hidden"/>
                <div class="cart-table-th">
                    <div class="wp">

                        <div class="th th-item">
                            <div class="td-inner">商品信息</div>
                        </div>
                        <div class="th th-price">
                            <div class="td-inner">单价</div>
                        </div>
                        <div class="th th-amount">
                            <div class="td-inner">数量</div>
                        </div>
                        <div class="th th-sum">
                            <div class="td-inner">金额</div>
                        </div>
                        <div class="th th-oplist">
                            <div class="td-inner">配送方式</div>
                        </div>

                    </div>
                </div>
                <!-- 商品 -->
                <tr id="J_BundleList_s_1911116345_1" class="item-list" th:each="item:${order.orderItems}">
                    <div id="J_Bundle_s_1911116345_1_0" class="bundle  bundle-last">
                        <div class="bundle-main">
                            <ul class="item-content clearfix">
                                <div class="pay-phone">
                                    <li class="td td-item">
                                        <div class="item-pic">
                                            <a href="#" class="J_MakePoint"> <img
                                                    th:src="'/product/'+${item.product.product_id}+'.jpg'"
                                                    class="itempic J_ItemImg" style="height: 80px;width: 80px;">
                                            </a>
                                        </div>
                                        <div class="item-info">
                                            <div class="item-basic-info">
                                                <a href="#" target="_blank" class="item-title J_MakePoint" data-point="tbcart.8.11" th:text="${item.product.name}"></a>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="td td-price">
                                        <div class="item-price price-promo-promo">
                                            <div class="price-content">
                                                <em class="J_Price price-now" th:text="${#numbers.formatDecimal(item.product.price,1,'COMMA',2,'POINT')}"></em>
                                            </div>
                                        </div>
                                    </li>
                                </div>


                                <li class="td td-amount">
                                    <div class="amount-wrapper " style="margin-top: 20px;">
                                        <div class="item-amount ">
                                            <span class="phone-title">购买数量</span>
                                            <div class="sl" th:text="${item.buy_count}"></div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-sum">
                                    <div class="td-inner">
                                        <em tabindex="0" class="J_ItemSum number" th:text="${#numbers.formatDecimal(item.buy_price,1,'COMMA',2,'POINT')}"></em>
                                    </div>
                                </li>
                                <li class="td td-oplist">
                                    <div class="td-inner">
                                        <span class="phone-title">配送方式</span>
                                        <div class="pay-logis">包邮</div>
                                    </div>
                                </li>

                            </ul>
                            <div class="clear"></div>

                        </div>
                    </div>
                </tr>
                <!-- 商品end -->


                <div class="clear"></div>
            </div>
        </div>


        <div class="pay-total">

            <!--留言-->
            <div class="order-extra">
                <div class="order-user-info">
                    <div id="holyshit257" class="memo">
                        <label>买家留言：</label> <input type="text"
                                                    id="con"
                                                    title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）"
                                                    placeholder="选填,建议填写和卖家达成一致的说明"
                                                    class="memo-input J_MakePoint c2c-text-default memo-close"/>
                        <div class="msg hidden J-msg">
                            <p class="error">最多输入500个字符</p>
                        </div>
                    </div>
                </div>

            </div>

            <div class="clear"></div>
        </div>
        <!--含运费小计 -->
        <div class="buy-point-discharge ">
            <p class="price g_price ">
                合计（含运费） <span>¥</span><em class="pay-sum" th:text="${#numbers.formatDecimal(order.total_price,1,'COMMA',2,'POINT')}"></em>
            </p>
        </div>

        <!--信息 -->
        <div class="order-go clearfix">
            <div class="pay-confirm clearfix">
                <div class="box">
                    <div tabindex="0" id="holyshit267" class="realPay">
                        <em class="t">实付款：</em> <span class="price g_price "> <span>¥</span>
								<em class="style-large-bold-red " id="J_ActualFee" th:text="${#numbers.formatDecimal(order.total_price,1,'COMMA',2,'POINT')}"></em> </span>
                    </div>

                    <div id="holyshit268" class="pay-address">

                        <p class="buy-footer-address" >
                            <input type="hidden" id="address-id" th:value="${address[0].address_id}"/>
                            <span class="buy-line-title buy-line-title-type">寄送至：</span>
                            <span class="buy--address-detail" th:if="${address != null}">
                                <span class="province" th:text="${address[0].province.province}"></span>
									<span class="city" th:if="${address[0].city.city eq '市辖区' or address[0].city.city eq '县'}"
                                          th:text="${address[0].area.area}"></span>
									<span class="city" th:if="${address[0].city.city ne '市辖区' and address[0].city.city ne '县'}"
                                          th:text="${address[0].city.city}"></span>
									<span class="dist" th:if="${address[0].city.city ne '市辖区' and address[0].city.city ne '县'}"
                                          th:text="${address[0].area.area}"></span>
									<span class="street" th:text="${address[0].total_address}"></span>
                            </span>
                            <span class="buy--address-detail" th:if="${address == null}">
                                <span class="province"></span>
									<span class="city"></span>
									<span class="dist"></span>
									<span class="street"></span>
                            </span>
                        </p>
                        <p class="buy-footer-address">
                            <span class="buy-line-title">收货人：</span>
                            <span class="buy-address-detail" th:if="${address != null}">
                                <span class="buy-user" th:text="${address[0].receiver}"></span>
                                <span class="buy-phone" th:text="${address[0].phone}"></span>
                            </span>
                            <span class="buy-address-detail" th:if="${address == null}">
                                <span class="buy-user"></span>
                                <span class="buy-phone"></span>
                            </span>
                        </p>
                    </div>
                </div>

                <div id="holyshit269" class="submitOrder">
                    <div class="go-btn-wrap">
                        <a id="J_Go" onclick="orderSubmit()" class="btn-go" tabindex="0"
                           title="点击此按钮，提交订单">提交订单</a>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>

    <div class="clear"></div>
</div>
</div>
<div class="footer">

    <div class="footer-bd">
        <p>
            <a href="#">关于我们</a> <a href="#">合作伙伴</a> <a href="#">联系我们</a> <a
                href="#">网站地图</a> <em>© 2015-2025 版权所有</em>
        </p>
    </div>
</div>
</div>
<!-- 增加地址 -->
<div class="theme-popover-mask"></div>

<div class="theme-popover">

    <!--标题 -->
    <div class="am-cf am-padding">
        <div class="am-fl am-cf">
            <strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add
            address</small>
        </div>
    </div>
    <hr/>

    <div class="am-u-md-12">
        <form class="am-form am-form-horizontal" id="form1">

            <div class="am-form-group">
                <label for="user-name" class="am-form-label">收货人</label>
                <div class="am-form-content">
                    <input type="text" id="user-name" name="receiver" placeholder="收货人">
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">手机号码</label>
                <div class="am-form-content">
                    <input id="user-phone" name="phone" placeholder="手机号必填" type="text">
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">邮编</label>
                <div class="am-form-content">
                    <input id="user-email" placeholder="邮编必填" name="postcode" type="text">
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">所在地</label>
                <div class="am-form-content address">
                    <select data-am-selected id="pro" name="province_id">
                        <option value="">--请选择--</option>
                    </select>
                    <select data-am-selected id="ci" name="city_id">
                        <option value="">--请选择--</option>
                    </select>
                    <select data-am-selected id="ar" name="area_id">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-intro" class="am-form-label">详细地址</label>
                <div class="am-form-content">
                    <textarea name="total_address" class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                    <small>100字以内写出你的详细地址...</small>
                </div>
            </div>

            <div class="am-form-group theme-poptit">
                <div class="am-u-sm-9 am-u-sm-push-3">
                    <div class="am-btn am-btn-danger" id="sub_address">保存</div>
                    <div class="am-btn am-btn-danger close">取消</div>
                </div>
            </div>
        </form>
    </div>

</div>
<!-- 增加地址 end-->
<div class="clear"></div>
<script language="JavaScript">
    function orderSubmit() {
        var addressId=$("#address-id").val();
        var orderId=$("#order-id").val();
        window.location.href="/order/pay/"+orderId+"/"+addressId;
    }
</script>
</body>

</html>